<script lang="tsx">
import { $on, $off, $once, $emit } from '../utils/gogocodeTransfer';
import type { PropType, VNode } from 'vue';
import * as Vue from 'vue'import { defineComponent } from 'vue';
import { Switch, Icon, Cell } from 'vant';
import { createNamespace } from '../../../utils/create';
import { strToCamel } from '../../../utils/index';
import SvgIcon from '@wshoto/h5-base-ui/src/components/SvgIcon/index.vue';
import type { CellType } from '../../../../types/index';

const [name, bem] = createNamespace('cell');

window.$vueApp.use(Switch).use(Icon).use(Cell);

export default defineComponent({
  name: strToCamel(name),
  components: {
    SvgIcon
  },
  props: {
    type: {
      type: String as PropType<CellType>,
      default: 'default'
    },
    title: {
      type: String,
      required: true
    },
    subTitle: String,
    rightContent: String,
    pitchOn: Boolean,
    required: Boolean
  },
  computed: {
    titleSlots() {
      const {
        title,
        required
      } = this;

      return (
        <div class={bem('left__title')}>
          <span class='custom-title van-ellipsis'>{title}</span>
          {required && <div class='mark'>*</div>}
        </div>
      );
    },
    rightIconSlots() {
      const {
        type,
        rightContent,
        pitchOn,
        handleClick
      } = this;
      const className = `van-cell__value ${bem('right')}`;
      let content: VNode;
      switch (type) {
        case 'select':
          content = (
            <div class={className}>
              <span class={['van-ellipsis', { "is-pitchOn": pitchOn }]}>{rightContent}</span>

              <van-icon name='arrow' color='#bdbdc1' />
            </div>
          );

          break;
        case 'radio':
          content = (
            <div class={className} onClick={handleClick}>
              <svg-icon class='fs22' src={pitchOn ? require('./assets/circle-active-new.svg') : require('./assets/circle-new.svg') } />
            </div>
          );

          break;
        case 'switch':
          content = (
            <div class={className} onClick={handleClick}>
              <van-switch value={pitchOn} size='26' inactive-color='#D8DADE' style={{ width: '1.77em' }} />
            </div>
          );
          break;
        default:
          content = (
            <div class={className}>
              {rightContent && <span class={['van-ellipsis']}>{rightContent}</span>}
              <van-icon name='arrow' color='#bdbdc1' />
            </div>
          );
          break;
      }
      return content;
    }
  },
  methods: {
    handleClick(evt: Event) {
      $emit(this, "click",evt);
    }
  },
  render(): VNode {
    const {
      type,
      subTitle,
      titleSlots,
      rightIconSlots,
      handleClick
    } = this;

    return (
      <van-cell
        class={bem()}
        titleClass={`van-ellipsis ${bem('left')}`}
        center
        label={subTitle}
        onClick={['default', 'select'].includes(type) && handleClick}
        {...{
          title: () => titleSlots,
          "right-icon": () => rightIconSlots
        }}
      />
    );
  }
})
</script>

<style lang="less" scoped>
.ws-cell {
  padding: 0.32rem;

  &__left {
    flex: none;

    &__title {
      line-height: 0.52rem;

      .custom-title {
        .fontsize(16px);
        color: var(--color-text-primary);
        font-weight: 400;
      }

      .mark {
        display: inline-block;
        margin-left: 0.08rem;
        color: var(--color-feat-error);
      }
    }

    .van-cell__label {
      .fontsize(14px);
      margin-top: 0.08rem;
      color: var(--color-text-secondary);
      line-height: 0.48rem;
      font-weight: 400;
    }
  }

  &__right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;

    .is-pitchOn {
      color: var(--color-text-regular);
    }

    .van-ellipsis {
      cursor: pointer;
    }

    .van-icon-arrow,
    .svg-icon {
      cursor: pointer;
      margin: 0.01rem;
    }

    ::v-deep .van-switch {
      &--on {
        background-color: var(--color-primary);

        .van-switch__node {
          transform: translateX(0.76em);
        }
      }

      &__node {
        box-shadow: none;
      }
    }
  }
}
</style>
